<template>
    <div>
        <div class="sky-screen ivu-mb-16">
            <row :gutter="24">
                <Col span="6">
                <Select v-model="searchItem.select" placeholder="请选择岗位" @on-change="onSearchItem">
                    <Option v-for="(item, index) in postList" :key="'post'+ index" :value="item.id">{{item.name}}
                    </Option>
                </Select>
                </Col>
                <Col span="18">
                <DatePicker v-model="searchItem.date" @on-change="onSearchItem" type="daterange" placeholder="回访日期">
                </DatePicker>
                </Col>
            </row>
        </div>
        <div class="sky-note">
            <Tag v-for="(tag, inum) in labelTags" :key="'tag' + inum" type="border" :color="colorArr[radomNum]">
                {{tag.callback_state}}({{tag.total}})</Tag>
        </div>
        <Timeline v-if="callbackData.length > 0" class="ivu-pt-16 main-height" style="min-height: 240px;">
            <TimelineItem v-for="(items, index) in callbackData" :key="'item'+index">
                <p class="time">{{items.current_callback_time_str}}</p>
                <p class="content" v-if="+items.data_type === 2" style="display: flex;align-items: center;">
                    <audio :id="`audio-${items.id}`" v-if="items.file_url" controls :src="items.file_url"
                            @play="audioplays(items.speed, items.id)"></audio>
                    <span v-if="items.file_url != ''" class="ivu-ml-16">
                        播放倍速：
                        <RadioGroup v-model="items.speed" @on-change="changeaudio(items.speed, items.id)">
                            <Radio :label="item.id" v-for="item in RadioGroup" :key="item.id">{{
                                item.name
                            }}</Radio>
                        </RadioGroup>
                    </span>
                </p>
                <p class="content" v-else>{{items.content}}</p>
                <p class="consultant">
                    <span class="c-inr-right" v-if="items.profession_name">{{items.profession_name}}</span>
                    <span class="c-inr-right" v-if="items.member_name">{{items.member_name}}</span>
                    <Badge status="processing" :text="items.callback_state" v-if="items.callback_state" />
                    <span> &nbsp; </span>
                    <Badge status="success" color="orange" :text="items.callback_way" v-if="items.callback_way"/>
                    <span v-if="items.duration">{{ items.duration }}秒</span>
                    <Icon @click="changeupdate(items)"
                            v-if="(+items.data_type === 2 && +items.type === 1 || +items.type === 2)  && items.file_url == '' && items.duration !== ''"
                            class="ivu-ml-8 icon" type="md-sync" color="#19be6b" size="18"></Icon>
                </p>
            </TimelineItem>
            <div class="ivu-pt-16" style="text-align: center">
                <a href="javaScript:;" v-if="this.page.total>callbackData.length" @click="load">点击加载更多</a>
                <span v-else>没有更多了</span>
            </div>
        </Timeline>
        <div v-else class="ivu-pt-16" style="height: 260px;text-align: center">暂无回访信息</div>
        <!-- <FooterToolbar>
            <Button type="primary" class="v-mt-20" size="large" v-if="status" @click="handleSubmit">回访</Button>
        </FooterToolbar> -->
        <!-- <table-model ref="editModel" @close="closeEdit" /> -->
        <Modal v-model="modal" draggable footer-hide>
            <p style="text-align: center;font-size:16px">录音同步已提交，请两分钟后刷新页面查看</p>
        </Modal>
    </div>
</template>
<script>
    import { formatWithYear } from '@/utils/datetime';
    import { PatientCallback, createvoiceQueue } from '@/api/patient';
    // import tableModel from '@/components/visitModel/table-model'
    import { mapState } from 'vuex'
    export default {
        // components: { tableModel },
        props: ['types', 'status', 'patientInfo'],
        computed: {
            ...mapState('admin/page', [
                'pagePatient'
            ])
        },
        data () {
            return {
                typels: [],
                tags: [],
                modal: false,
                loading: false,
                showUpdate: false,
                colorArr: ['primary', 'success', 'warning'],
                radomNum: Math.floor(Math.random() * 2),
                callbackData: [],
                labelTags: [],
                postList: [{ id: '00', name: '全部岗位' }],
                searchItem: {
                    date: [undefined, undefined],
                    select: '00'
                },
                patientData: {},
                tagIds: [],
                methodList: [],
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                RadioGroup: [
                    { id: 0.5, name: '0.5' },
                    { id: 0.75, name: '0.75' },
                    { id: 1, name: '1.0' },
                    { id: 1.5, name: '1.5' },
                    { id: 1.75, name: '1.75' },
                    { id: 2, name: '2.0' }
                ],
                audioplay: null,
                speedid: null,
                modal: false,
                state: true
            }
        },
        methods: {
            getData (id, types, tags, methods, ids, data) {
                this.patientId = id || this.pagePatient.patientId;
                this.patientData = data;
                if (!this.patientData.id) {
                    this.patientData.id = this.pagePatient.patientId
                }
                this.typels = types;
                this.methodList = methods;
                this.tags = tags;
                this.tagIds = ids;
                this.patientCallback();
            },
            patientCallback () {
                this.page.page = 1
                const params = {
                    page: this.page.page,
                    pageSize: this.page.pageSize,
                    patient_user_id: this.patientId,
                    start_time: this.searchItem.date[0] && this.formDate(this.searchItem.date[0]),
                    end_time: this.searchItem.date[1] && this.formDate(this.searchItem.date[1]),
                    profession_id: this.searchItem.select === '00' ? '' : this.searchItem.select
                }
                PatientCallback(params).then((res) => {
                    this.page.total = res.total
                    let list = [];
                    for (let item of res.list) {
                        list.push({ ...item, speed: 1 });
                    }
                    this.callbackData = list
                    this.labelTags = res.statistics_list
                    if (this.postList.length === 1) {
                        const postList = res.condition.permission_list
                        this.postList = this.postList.concat(postList);
                    }
                }).catch(() => { })
            },
            load () {
                this.page.page = this.page.page + 1
                PatientCallback({
                    page: this.page.page,
                    pageSize: this.page.pageSize,
                    patient_user_id: this.patientId,
                    start_time: this.searchItem.date[0] && this.formDate(this.searchItem.date[0]),
                    end_time: this.searchItem.date[1] && this.formDate(this.searchItem.date[1]),
                    profession_id: this.searchItem.select === '00' ? '' : this.searchItem.select
                }).then((res) => {
                    this.callbackData.push(...res.list)
                }).catch(() => { })
            },
            onSearchItem () {
                this.patientCallback();
            },
            formDate (date) {
                return formatWithYear(date, '-')
            },
            handleSubmit () {
                const type = this.pagePatient ? this.pagePatient.edit_type : ''
                this.$refs.editModel.handleShow(this.patientInfo, this.typels, this.tags, type)
            },

            audioplays (speed, id) {
                if (this.audioplay) {
                    if (this.speedid !== id) {
                        this.audioplay.pause();
                        this.audioplay = null;
                    }
                }
                this.speedid = id;
                this.audioplay = document.getElementById(`audio-${id}`);
                this.audioplay.playbackRate = speed;
            },
            changeaudio (speed, id) {
                if (this.speedid === id) {
                    this.audioplay.playbackRate = speed;
                }
            },
            changeupdate (item) {
                if (this.state) {
                    this.state = false;
                    let time = item.current_callback_time_str.trim().split(' ');
                    const params = {
                        wechatid: item.wechatid,
                        imei: item.deviceid,
                        start_time: `${time[0]} 00:00:00`,
                        end_time: `${time[0]} 23:59:59`,
                        type: 'swoole'
                    };
                    createvoiceQueue(params).then(res => {
                        this.modal = true;
                        setTimeout(() => {
                            this.state = true;
                        }, 180000);
                    }).catch(() => {
                        this.modal = false;
                    });
                }
            }
        },
        filters: {
            handleState (val = '') {
                let reVal = '';
                if (val) {
                    const value = parseInt(val, 10)
                    if (value === 1) {
                        reVal = '未接通';
                    } else if (value === 2) {
                        reVal = '微信拉黑';
                    } else if (value === 3) {
                        reVal = '正常回访';
                    } else if (value === 4) {
                        reVal = '已到院';
                    }
                }
                return reVal
            }
        }
    }
</script>
<style scoped>
    .ivu-footer-toolbar {
        width: 1000px;
    }

    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    .c-inr-right {
        margin-right: 10px;
    }

    .main-height {
        max-height: 540px;
        /* margin-right: -16px; */
        overflow-y: auto;
    }

    h4 span {
        margin-left: 5px;
    }

    .sky-screen {
        margin-top: 16px;
    }

    *::-webkit-scrollbar {
        width: 10px;
        /*对垂直流动条有效*/
        height: 10px;
        /*对水平流动条有效*/
    }

    /*定义滚动条的轨道颜色、内阴影及圆角*/
    *::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 3px;
    }

    /*定义滑块颜色、内阴影及圆角*/
    *::-webkit-scrollbar-thumb {
        border-radius: 7px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #eee;
    }

    /*定义右下角汇合处的样式*/
    *::-webkit-scrollbar-corner {
        background: khaki;
    }
</style>
